<template>
    <!-- 选项管理 -->
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>
                    选项列表
                    <el-button type="text" @click="$router.push({ name: 'ItemsAdd' })">
                        添加
                    </el-button>
                </div>
            </template>
            <!-- 大纲节点 -->
            <el-tree :data="items" :props="{ label: 'itemname', children: 'children' }">
                <template #default="{ data,node }">
                    <div>
                        <span>{{ data.itemname }}</span>
                        <el-button 
                            v-if="data.pid==='0'"
                            type="text" 
                            @click.stop="$router.push({ name: 'ItemsAdd', 
                            query: { id: data._id } })"
                        >
                            添加下级选项
                        </el-button>
                        <el-button 
                            v-if="data.children.length === 0"
                            type="text" 
                            @click.stop="deleteItemsLoading(data._id)"
                        >删除</el-button>
                        <el-button 
                            type="text" 
                            @click="$router.push({ name: 'ItemsEdit', params: { id: data._id } })"
                        >编辑</el-button>
                        <!-- 排序 -->
                        <el-button 
                            v-if="node.previousSibling"
                            icon="el-icon-arrow-up"
                            type="text"
                            @click.stop="sort(data._id,node.previousSibling.data._id)"
                        >
                        </el-button>
                        <el-button 
                            v-if="node.nextSibling"
                            icon="el-icon-arrow-down"
                            type="text" 
                            @click.stop="sort(data._id,node.nextSibling.data._id)"
                        >
                        </el-button>
                    </div>
                </template>
            </el-tree>
        </el-card>
    </div>
</template>

<script>
import { sortItem } from "../../api/items";
import { mapActions } from "vuex";
export default {
    data() {
        return {
            loading: false,
            items: [],
        };
    },
    async created() {
        await this.getItemsLoading();
        // await this.deleteItemsLoading();
    },
    methods: {
        ...mapActions("items", ["getItems", "deleteItem"]),
        async sort(id1,id2){
            await sortItem(id1,id2).catch(()=>{});
            this.getItemsLoading();
        },
        async deleteItemsLoading(id) {
            try {
                await this.$confirm("确定删除吗？");
                this.loading = true;
                await this.deleteItem(id);
                // 删除成功后，自动更新页面
                await this.getItemsLoading();
            } catch (error) {
                this.loading = false;
            }
            this.loading = false;
        },
        async getItemsLoading() {
            this.loading = true;
            try {
                const { data } = await this.getItems();
                this.items = data;
            } catch (error) { }
            this.loading = false;
        }
    }
}
</script>